<template>
  <div class="detection-history">
    <div class="page-header">
      <h2>检测历史记录</h2>
      <p>查看和管理您的检测历史记录</p>
    </div>

    <!-- 统计概览 -->
    <div class="stats-overview">
      <div class="stat-card">
        <div class="stat-icon">
          <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
            <path d="M9 11H5a2 2 0 0 0-2 2v7a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7a2 2 0 0 0-2-2h-4"/>
            <path d="M9 11V9a2 2 0 0 1 2-2v0a2 2 0 0 1 2 2v2"/>
          </svg>
        </div>
        <div class="stat-info">
          <div class="stat-number">{{ stats.totalDetections }}</div>
          <div class="stat-label">总检测次数</div>
        </div>
      </div>
      
      <div class="stat-card">
        <div class="stat-icon">
          <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
            <path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/>
          </svg>
        </div>
        <div class="stat-info">
          <div class="stat-number">{{ stats.successRate }}%</div>
          <div class="stat-label">准确率</div>
        </div>
      </div>
      
      <div class="stat-card">
        <div class="stat-icon">
          <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
            <path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/>
          </svg>
        </div>
        <div class="stat-info">
          <div class="stat-number">{{ stats.threatsBlocked }}</div>
          <div class="stat-label">威胁拦截</div>
        </div>
      </div>
      
      <div class="stat-card">
        <div class="stat-icon">
          <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
            <path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"/>
          </svg>
        </div>
        <div class="stat-info">
          <div class="stat-number">{{ stats.lastWeek }}</div>
          <div class="stat-label">本周检测</div>
        </div>
      </div>
    </div>

    <!-- 筛选和搜索 -->
    <div class="filter-section">
      <div class="filter-group">
        <div class="filter-item">
          <label>时间范围</label>
          <select v-model="filters.timeRange" @change="applyFilters">
            <option value="all">全部</option>
            <option value="today">今天</option>
            <option value="week">本周</option>
            <option value="month">本月</option>
            <option value="custom">自定义</option>
          </select>
        </div>
        
        <div class="filter-item" v-if="filters.timeRange === 'custom'">
          <label>开始日期</label>
          <input type="date" v-model="filters.startDate" @change="applyFilters" />
        </div>
        
        <div class="filter-item" v-if="filters.timeRange === 'custom'">
          <label>结束日期</label>
          <input type="date" v-model="filters.endDate" @change="applyFilters" />
        </div>
        
        <div class="filter-item">
          <label>检测类型</label>
          <select v-model="filters.detectionType" @change="applyFilters">
            <option value="all">全部类型</option>
            <option value="text">文本检测</option>
            <option value="image">图像检测</option>
            <option value="video">视频检测</option>
            <option value="audio">音频检测</option>
            <option value="combined">综合分析</option>
          </select>
        </div>
        
        <div class="filter-item">
          <label>风险等级</label>
          <select v-model="filters.riskLevel" @change="applyFilters">
            <option value="all">全部等级</option>
            <option value="low">低风险</option>
            <option value="medium">中风险</option>
            <option value="high">高风险</option>
            <option value="critical">极高风险</option>
          </select>
        </div>
      </div>
      
      <div class="search-actions">
        <div class="search-box">
          <input 
            type="text" 
            v-model="searchQuery" 
            placeholder="搜索检测内容..."
            @input="handleSearch"
          />
          <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
            <circle cx="11" cy="11" r="8"/>
            <path d="m21 21-4.35-4.35"/>
          </svg>
        </div>
        
        <div class="action-buttons">
          <button class="btn btn-secondary" @click="exportHistory">
            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
              <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/>
              <polyline points="7,10 12,15 17,10"/>
              <line x1="12" y1="15" x2="12" y2="3"/>
            </svg>
            导出记录
          </button>
          <button class="btn btn-secondary" @click="clearFilters">
            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
              <path d="M3 6h18"/>
              <path d="M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"/>
              <path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6"/>
            </svg>
            清除筛选
          </button>
        </div>
      </div>
    </div>

    <!-- 历史记录表格 -->
    <div class="history-table">
      <div class="table-header">
        <div class="table-title">
          <h3>检测记录</h3>
          <span class="record-count">共 {{ filteredHistory.length }} 条记录</span>
        </div>
        <div class="table-controls">
          <button class="btn btn-text" @click="selectAll">
            {{ selectedRecords.length > 0 ? '取消全选' : '全选' }}
          </button>
          <button 
            class="btn btn-danger" 
            @click="deleteSelected"
            :disabled="selectedRecords.length === 0"
          >
            删除选中
          </button>
        </div>
      </div>
      
      <div class="table-container">
        <table>
          <thead>
            <tr>
              <th>
                <input 
                  type="checkbox" 
                  :checked="selectedRecords.length === filteredHistory.length"
                  @change="toggleSelectAll"
                />
              </th>
              <th>检测时间</th>
              <th>类型</th>
              <th>内容预览</th>
              <th>风险等级</th>
              <th>可信度</th>
              <th>状态</th>
              <th>操作</th>
            </tr>
          </thead>
          <tbody>
            <tr v-for="record in paginatedHistory" :key="record.id">
              <td>
                <input 
                  type="checkbox" 
                  :value="record.id"
                  v-model="selectedRecords"
                />
              </td>
              <td>{{ formatDate(record.timestamp) }}</td>
              <td>
                <span class="type-badge" :class="record.type">
                  {{ getTypeLabel(record.type) }}
                </span>
              </td>
              <td>
                <div class="content-preview">
                  <div class="preview-text">{{ record.content }}</div>
                  <div class="preview-meta">{{ record.source }}</div>
                </div>
              </td>
              <td>
                <div class="risk-level" :class="record.riskLevel">
                  <div class="risk-indicator"></div>
                  <span>{{ getRiskLabel(record.riskLevel) }}</span>
                </div>
              </td>
              <td>
                <div class="confidence-score">
                  <div class="confidence-bar">
                    <div 
                      class="confidence-fill" 
                      :style="{ width: record.confidence + '%' }"
                    ></div>
                  </div>
                  <span>{{ record.confidence }}%</span>
                </div>
              </td>
              <td>
                <span class="status-badge" :class="record.status">
                  {{ getStatusLabel(record.status) }}
                </span>
              </td>
              <td>
                <div class="action-buttons">
                  <button class="btn btn-link" @click="viewDetail(record)">
                    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                      <path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"/>
                      <circle cx="12" cy="12" r="3"/>
                    </svg>
                  </button>
                  <button class="btn btn-link" @click="shareRecord(record)">
                    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                      <path d="M4 12v8a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-8"/>
                      <polyline points="16,6 12,2 8,6"/>
                      <line x1="12" y1="2" x2="12" y2="15"/>
                    </svg>
                  </button>
                  <button class="btn btn-link" @click="deleteRecord(record)">
                    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                      <path d="M3 6h18"/>
                      <path d="M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"/>
                      <path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6"/>
                    </svg>
                  </button>
                </div>
              </td>
            </tr>
          </tbody>
        </table>
      </div>
      
      <!-- 分页 -->
      <div class="pagination">
        <div class="pagination-info">
          显示 {{ (currentPage - 1) * pageSize + 1 }} - {{ Math.min(currentPage * pageSize, filteredHistory.length) }} 条，共 {{ filteredHistory.length }} 条
        </div>
        <div class="pagination-controls">
          <button 
            class="btn btn-secondary" 
            @click="previousPage"
            :disabled="currentPage === 1"
          >
            上一页
          </button>
          <span class="page-numbers">
            <button
              v-for="page in visiblePages"
              :key="page"
              class="page-btn"
              :class="{ active: page === currentPage }"
              @click="currentPage = page"
            >
              {{ page }}
            </button>
          </span>
          <button 
            class="btn btn-secondary" 
            @click="nextPage"
            :disabled="currentPage === totalPages"
          >
            下一页
          </button>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive, computed, onMounted } from 'vue'

// 统计数据
const stats = ref({
  totalDetections: 1234,
  successRate: 96.5,
  threatsBlocked: 89,
  lastWeek: 45
})

// 筛选条件
const filters = reactive({
  timeRange: 'all',
  startDate: '',
  endDate: '',
  detectionType: 'all',
  riskLevel: 'all'
})

// 搜索查询
const searchQuery = ref('')

// 选中的记录
const selectedRecords = ref([])

// 分页
const currentPage = ref(1)
const pageSize = ref(10)

// 历史记录数据
const historyData = ref([
  {
    id: 1,
    timestamp: '2024-01-20 14:30:15',
    type: 'text',
    content: '这是一条可疑的文本消息，包含诈骗信息...',
    source: '微信聊天记录',
    riskLevel: 'high',
    confidence: 95,
    status: 'completed'
  },
  {
    id: 2,
    timestamp: '2024-01-20 13:45:22',
    type: 'image',
    content: '检测图像是否包含虚假信息',
    source: '朋友圈图片',
    riskLevel: 'medium',
    confidence: 78,
    status: 'completed'
  },
  {
    id: 3,
    timestamp: '2024-01-20 12:20:10',
    type: 'video',
    content: '检测视频内容真实性',
    source: '短视频平台',
    riskLevel: 'low',
    confidence: 45,
    status: 'completed'
  },
  {
    id: 4,
    timestamp: '2024-01-20 11:15:33',
    type: 'audio',
    content: '语音消息声纹分析',
    source: '电话录音',
    riskLevel: 'critical',
    confidence: 98,
    status: 'completed'
  },
  {
    id: 5,
    timestamp: '2024-01-20 10:05:18',
    type: 'combined',
    content: '综合分析多媒体内容',
    source: '社交媒体',
    riskLevel: 'medium',
    confidence: 82,
    status: 'processing'
  }
])

// 过滤后的历史记录
const filteredHistory = computed(() => {
  let filtered = [...historyData.value]
  
  // 按时间范围筛选
  if (filters.timeRange !== 'all') {
    const now = new Date()
    const today = new Date(now.getFullYear(), now.getMonth(), now.getDate())
    
    filtered = filtered.filter(record => {
      const recordDate = new Date(record.timestamp)
      
      switch (filters.timeRange) {
        case 'today':
          return recordDate >= today
        case 'week': {
          const weekAgo = new Date(today.getTime() - 7 * 24 * 60 * 60 * 1000)
          return recordDate >= weekAgo
        }
        case 'month': {
          const monthAgo = new Date(today.getTime() - 30 * 24 * 60 * 60 * 1000)
          return recordDate >= monthAgo
        }
        case 'custom': {
          const start = filters.startDate ? new Date(filters.startDate) : new Date(0)
          const end = filters.endDate ? new Date(filters.endDate) : new Date()
          return recordDate >= start && recordDate <= end
        }
        default:
          return true
      }
    })
  }
  
  // 按检测类型筛选
  if (filters.detectionType !== 'all') {
    filtered = filtered.filter(record => record.type === filters.detectionType)
  }
  
  // 按风险等级筛选
  if (filters.riskLevel !== 'all') {
    filtered = filtered.filter(record => record.riskLevel === filters.riskLevel)
  }
  
  // 按搜索关键词筛选
  if (searchQuery.value) {
    const query = searchQuery.value.toLowerCase()
    filtered = filtered.filter(record => 
      record.content.toLowerCase().includes(query) ||
      record.source.toLowerCase().includes(query)
    )
  }
  
  return filtered
})

// 分页后的历史记录
const paginatedHistory = computed(() => {
  const start = (currentPage.value - 1) * pageSize.value
  const end = start + pageSize.value
  return filteredHistory.value.slice(start, end)
})

// 总页数
const totalPages = computed(() => {
  return Math.ceil(filteredHistory.value.length / pageSize.value)
})

// 可见的页码
const visiblePages = computed(() => {
  const total = totalPages.value
  const current = currentPage.value
  const pages = []
  
  if (total <= 5) {
    for (let i = 1; i <= total; i++) {
      pages.push(i)
    }
  } else {
    if (current <= 3) {
      pages.push(1, 2, 3, 4, 5)
    } else if (current >= total - 2) {
      pages.push(total - 4, total - 3, total - 2, total - 1, total)
    } else {
      pages.push(current - 2, current - 1, current, current + 1, current + 2)
    }
  }
  
  return pages
})

// 应用筛选
const applyFilters = () => {
  currentPage.value = 1
}

// 处理搜索
const handleSearch = () => {
  currentPage.value = 1
}

// 清除筛选
const clearFilters = () => {
  Object.assign(filters, {
    timeRange: 'all',
    startDate: '',
    endDate: '',
    detectionType: 'all',
    riskLevel: 'all'
  })
  searchQuery.value = ''
  currentPage.value = 1
}

// 导出历史记录
const exportHistory = () => {
  // 这里应该实现导出功能
  console.log('导出历史记录')
  alert('导出功能开发中...')
}

// 全选/取消全选
const selectAll = () => {
  if (selectedRecords.value.length > 0) {
    selectedRecords.value = []
  } else {
    selectedRecords.value = filteredHistory.value.map(record => record.id)
  }
}

// 切换全选状态
const toggleSelectAll = () => {
  selectAll()
}

// 删除选中记录
const deleteSelected = () => {
  if (selectedRecords.value.length === 0) return
  
  if (confirm(`确定要删除选中的 ${selectedRecords.value.length} 条记录吗？`)) {
    historyData.value = historyData.value.filter(
      record => !selectedRecords.value.includes(record.id)
    )
    selectedRecords.value = []
  }
}

// 查看详情
const viewDetail = (record) => {
  console.log('查看详情:', record)
  // 这里应该跳转到详情页或打开详情模态框
}

// 分享记录
const shareRecord = (record) => {
  console.log('分享记录:', record)
  // 这里应该实现分享功能
  alert('分享功能开发中...')
}

// 删除单条记录
const deleteRecord = (record) => {
  if (confirm('确定要删除这条记录吗？')) {
    historyData.value = historyData.value.filter(item => item.id !== record.id)
  }
}

// 上一页
const previousPage = () => {
  if (currentPage.value > 1) {
    currentPage.value--
  }
}

// 下一页
const nextPage = () => {
  if (currentPage.value < totalPages.value) {
    currentPage.value++
  }
}

// 格式化日期
const formatDate = (timestamp) => {
  const date = new Date(timestamp)
  const now = new Date()
  const diff = now - date
  
  if (diff < 60000) {
    return '刚刚'
  } else if (diff < 3600000) {
    return `${Math.floor(diff / 60000)}分钟前`
  } else if (diff < 86400000) {
    return `${Math.floor(diff / 3600000)}小时前`
  } else {
    return date.toLocaleDateString('zh-CN', {
      year: 'numeric',
      month: '2-digit',
      day: '2-digit',
      hour: '2-digit',
      minute: '2-digit'
    })
  }
}

// 获取类型标签
const getTypeLabel = (type) => {
  const labels = {
    text: '文本',
    image: '图像',
    video: '视频',
    audio: '音频',
    combined: '综合'
  }
  return labels[type] || type
}

// 获取风险等级标签
const getRiskLabel = (level) => {
  const labels = {
    low: '低风险',
    medium: '中风险',
    high: '高风险',
    critical: '极高风险'
  }
  return labels[level] || level
}

// 获取状态标签
const getStatusLabel = (status) => {
  const labels = {
    completed: '已完成',
    processing: '处理中',
    failed: '失败'
  }
  return labels[status] || status
}

onMounted(() => {
  // 初始化数据
})
</script>

<style scoped>
.detection-history {
  padding: 24px;
  max-width: 1200px;
  margin: 0 auto;
}

.page-header {
  margin-bottom: 32px;
}

.page-header h2 {
  margin: 0 0 8px 0;
  color: #1e3c72;
  font-size: 24px;
  font-weight: 600;
}

.page-header p {
  margin: 0;
  color: #666;
  font-size: 14px;
}

/* 统计概览 */
.stats-overview {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 20px;
  margin-bottom: 32px;
}

.stat-card {
  background: white;
  padding: 20px;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  display: flex;
  align-items: center;
  gap: 16px;
}

.stat-icon {
  width: 48px;
  height: 48px;
  background: linear-gradient(135deg, #1e3c72, #2d4a87);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
}

.stat-number {
  font-size: 24px;
  font-weight: 700;
  color: #1e3c72;
  line-height: 1;
}

.stat-label {
  font-size: 14px;
  color: #666;
  margin-top: 4px;
}

/* 筛选区域 */
.filter-section {
  background: white;
  padding: 24px;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  margin-bottom: 24px;
}

.filter-group {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  margin-bottom: 20px;
}

.filter-item {
  display: flex;
  flex-direction: column;
  min-width: 150px;
}

.filter-item label {
  margin-bottom: 8px;
  color: #333;
  font-weight: 500;
  font-size: 14px;
}

.filter-item select,
.filter-item input {
  padding: 8px 12px;
  border: 2px solid #e9e9e9;
  border-radius: 6px;
  font-size: 14px;
  transition: border-color 0.2s;
}

.filter-item select:focus,
.filter-item input:focus {
  outline: none;
  border-color: #1e3c72;
}

.search-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
}

.search-box {
  position: relative;
  flex: 1;
  max-width: 300px;
}

.search-box input {
  width: 100%;
  padding: 8px 12px 8px 40px;
  border: 2px solid #e9e9e9;
  border-radius: 6px;
  font-size: 14px;
}

.search-box svg {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: #666;
}

.action-buttons {
  display: flex;
  gap: 12px;
}

.btn {
  padding: 8px 16px;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-size: 14px;
  transition: all 0.2s;
  display: flex;
  align-items: center;
  gap: 8px;
}

.btn-primary {
  background: #1e3c72;
  color: white;
}

.btn-secondary {
  background: #f5f5f5;
  color: #666;
}

.btn-danger {
  background: #dc3545;
  color: white;
}

.btn-text {
  background: transparent;
  color: #1e3c72;
  padding: 4px 8px;
}

.btn-link {
  background: transparent;
  color: #1e3c72;
  padding: 4px;
}

.btn:hover {
  opacity: 0.9;
}

.btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* 表格样式 */
.history-table {
  background: white;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  overflow: hidden;
}

.table-header {
  padding: 20px 24px;
  background: #f8f9fa;
  border-bottom: 1px solid #e9e9e9;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.table-title h3 {
  margin: 0 0 4px 0;
  color: #1e3c72;
  font-size: 18px;
  font-weight: 600;
}

.record-count {
  color: #666;
  font-size: 14px;
}

.table-controls {
  display: flex;
  gap: 12px;
}

.table-container {
  overflow-x: auto;
}

table {
  width: 100%;
  border-collapse: collapse;
}

th, td {
  padding: 16px;
  text-align: left;
  border-bottom: 1px solid #e9e9e9;
}

th {
  background: #f8f9fa;
  font-weight: 600;
  color: #333;
  font-size: 14px;
}

td {
  font-size: 14px;
  color: #666;
}

.type-badge {
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 500;
}

.type-badge.text {
  background: #e3f2fd;
  color: #1976d2;
}

.type-badge.image {
  background: #e8f5e8;
  color: #388e3c;
}

.type-badge.video {
  background: #fff3e0;
  color: #f57c00;
}

.type-badge.audio {
  background: #fce4ec;
  color: #c2185b;
}

.type-badge.combined {
  background: #f3e5f5;
  color: #7b1fa2;
}

.content-preview {
  max-width: 200px;
}

.preview-text {
  font-size: 14px;
  color: #333;
  margin-bottom: 4px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.preview-meta {
  font-size: 12px;
  color: #999;
}

.risk-level {
  display: flex;
  align-items: center;
  gap: 8px;
}

.risk-indicator {
  width: 8px;
  height: 8px;
  border-radius: 50%;
}

.risk-level.low .risk-indicator {
  background: #4caf50;
}

.risk-level.medium .risk-indicator {
  background: #ff9800;
}

.risk-level.high .risk-indicator {
  background: #f44336;
}

.risk-level.critical .risk-indicator {
  background: #9c27b0;
}

.confidence-score {
  display: flex;
  align-items: center;
  gap: 8px;
}

.confidence-bar {
  width: 60px;
  height: 4px;
  background: #e9e9e9;
  border-radius: 2px;
  overflow: hidden;
}

.confidence-fill {
  height: 100%;
  background: linear-gradient(90deg, #1e3c72, #2d4a87);
  transition: width 0.3s;
}

.status-badge {
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 500;
}

.status-badge.completed {
  background: #e8f5e8;
  color: #388e3c;
}

.status-badge.processing {
  background: #fff3e0;
  color: #f57c00;
}

.status-badge.failed {
  background: #ffebee;
  color: #d32f2f;
}

.action-buttons {
  display: flex;
  gap: 8px;
}

/* 分页 */
.pagination {
  padding: 20px 24px;
  background: #f8f9fa;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.pagination-info {
  font-size: 14px;
  color: #666;
}

.pagination-controls {
  display: flex;
  align-items: center;
  gap: 12px;
}

.page-numbers {
  display: flex;
  gap: 4px;
}

.page-btn {
  padding: 8px 12px;
  border: 1px solid #e9e9e9;
  background: white;
  cursor: pointer;
  border-radius: 4px;
  font-size: 14px;
  transition: all 0.2s;
}

.page-btn:hover {
  border-color: #1e3c72;
  color: #1e3c72;
}

.page-btn.active {
  background: #1e3c72;
  color: white;
  border-color: #1e3c72;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .detection-history {
    padding: 16px;
  }
  
  .stats-overview {
    grid-template-columns: 1fr;
  }
  
  .filter-group {
    flex-direction: column;
  }
  
  .search-actions {
    flex-direction: column;
  }
  
  .table-header {
    flex-direction: column;
    gap: 12px;
  }
  
  .pagination {
    flex-direction: column;
    gap: 12px;
  }
}
</style> 